<template>
	<view class="good-detail-container">
		<!-- 商品轮播图 -->
    <swiper class="good-pic-swiper" :indicator-dots="true" :circular="true" :autoplay="true" :interval="3000" :duration="1000">
      <swiper-item v-for="(pics, index) of goodDetailObj.pics" :key="index">
        <image class="swiper-item" :src="pics.pics_big" @click="imagePreviewhandler(index)"></image>
      </swiper-item>
    </swiper>
    <!-- 商品价格区域 -->
    <view v-if="goodDetailObj.goods_price" class="good-price">￥ {{goodDetailObj.goods_price}} </view>
    <!-- 商品名称区域 -->
    <view class="good-title-box">
      <!-- 商品名称 -->
      <text class="good-title">{{goodDetailObj.goods_name}}</text>
      <!-- 收藏按钮 -->
      <view class="good-like">
        <uni-icons color="#ddd" type="star" size="18"></uni-icons>
        <text>收藏</text>
      </view>
    </view>
    <!-- 运费区域 -->
    <view class="good-freight">
      快递：{{goodDetailObj.is_freight ? '免运费' : '不含运费'}}
    </view>
    <!-- 商品详情分隔 -->
    <view class="good-detail-title">
     == 商 品 详 细 介 绍 == {{cart.length}}
    </view>
    <!-- 商品详情 -->
    <rich-text class="good-detail-wrapper" :nodes="goodDetailObj.goods_introduce"></rich-text>
    <!-- 底部加入购物车及立即购买导航组件 -->
    <view class="shopCar-nav">
      <uni-goods-nav :fill="true"  :options="options" :buttonGroup="buttonGroup"  @click="onClick" @buttonClick="buttonClick" />
    </view>
	</view>
</template>

<script>
  // 导入vuex中的方法
  import { mapState, mapMutations, mapGetters } from 'vuex'
	export default {
		data() {
			return {
				// 当前商品的ID
        goods_id: '',
        // 当前商品信息
        goodDetailObj: {},
        // 底部购物车及立即购买导航组件配置
        options: [{
                    icon: 'shop',
                    text: '店铺',
                    infoBackgroundColor:'#007aff',
                    infoColor:"red"
                }, {
                    icon: 'cart',
                    text: '购物车',
                    info: 0
                }],
                buttonGroup: [{
                  text: '加入购物车',
                  backgroundColor: '#ff0000',
                  color: '#fff'
                },
                {
                  text: '立即购买',
                  backgroundColor: '#ffa200',
                  color: '#fff'
                }
                ]
			}
		},
    onLoad(option) {
      this.goods_id = option.goods_id
      this.getGoodDetail()
    },
    methods: {
      // 映射状态管理仓库中的方法
      ...mapMutations('m_cart', ['addToCart']),
      // 根据路由传递goods_id查询商品详情
      async getGoodDetail() {
        const { data } = await uni.$http.get('/api/public/v1/goods/detail', { goods_id: this.goods_id })
        if (data.meta.status !== 200) return uni.$showMsg()
        // 添加是否包邮字段
        data.message.is_freight = true
        data.message.goods_introduce = data.message.goods_introduce.replace(/webp/g, 'jpg').replace(/<img /g, '<img style="display:block;"')
        this.goodDetailObj = data.message
      },
     
      // 轮播图片预览
       imagePreviewhandler(index) {
         uni.previewImage({
           current: index,
           urls: this.goodDetailObj.pics.map(pics => {
             return pics.pics_big
           }),
           indicator: "default"
         })
      },
      
      // 左侧按钮点击事件
      onClick (e) {
        // 切换到TabBar首页
        if(e.index !== 1) return uni.switchTab({
          url: '/pages/home/home'
        })
        // 切换到TabBar购物车页面
        uni.switchTab({
          url: '/pages/cart/cart'
        })
      },
      // 右侧按钮点击事件
      buttonClick (e) {
        // 加入购物车操作
        if(e.index !== 1) {
          //组装商品信息对象{ goods_id, goods_name, goods_price, goods_count, goods_small_logo, goods_state }
          const cartGood = {
            goods_id: this.goodDetailObj.goods_id, 
            goods_name: this.goodDetailObj.goods_name,
            goods_price: this.goodDetailObj.goods_price, 
            goods_count: 1, 
            goods_small_logo: this.goodDetailObj.goods_small_logo, 
            goods_state: true
          }
          // mapMutations映射新增购物车商品对象至状态管理State中Cart数组方法
          this.addToCart(cartGood)
          return
        } 
        // 立即购买操作
      }
    },
    computed: {
      // 映射状态管理State购物车数据
      ...mapState('m_cart', ['cart']),
      // 映射状态管理Getters中购物车商品数量
      ...mapGetters('m_cart', ['total'])
    },
    watch: {
      total:{
        handler(newVal) {
          this.options[1].info = newVal
        },
        immediate: true
    }
  }
}
</script>

<style lang="scss">
.good-detail-container {
  // 商品轮播图样式
  .good-pic-swiper {
    height: 750rpx;
    image {
      width: 100%;
      height: 100%;
    }
  }
  
  // 商品价格区域样式
  .good-price {
    font-size: 36rpx;
    color: #C00000;
    font-weight: 600;
    margin: 22rpx 0;
  }
  
  // 商品名称区域样式
  .good-title-box {
    display: flex;
    // 商品名称
    .good-title {
      font-size: 28rpx;
    }
    // 收藏
    .good-like {
      display: flex;
      width: 350rpx;
      color: #ddd;
      margin-left: 20rpx;
      font-size: 28rpx;
      border-left: 1rpx solid #efefef;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
  }
  // 运费
  .good-freight {
    color: #ddd;
    margin: 26rpx 0;
    font-size: 28rpx;
  }
  
  // 商品详情分隔标题
  .good-detail-title {
    height: 90rpx;
    width: 100%;
    text-align: center;
    line-height: 90rpx;
    color: #fff;
    font-weight: 700;
    background-color: black;
  }

  // 底部uni-goods-nav组件包裹盒子
  .shopCar-nav {
    position: sticky;
    left: 0;
    bottom: 0;
    width: 100%;
  }
  
}
</style>
